<template>
  <div style="margin-top: 50px">
    <h1>欢迎来到酷鲨商城</h1>
    <img src="imgs/shark.png" alt="">
    <h2>CoolSharkMall</h2>
    <el-card style="width: 600px;height: 300px;margin: 0 auto;
background-color: rgba(255,255,255,0.3)">
      <el-form :rules="rules" ref="user" :model="user" label-width="70px" style="width: 400px;margin:40px auto">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox >记住密码</el-checkbox>
          <el-checkbox >自动登录</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button style="position: relative;right: 30px" type="primary" @click="onSubmit('user')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      rules:{
        username: [
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:4,max:15,message:'用户名的长度必须是4到15个字符',trigger:'blur'},
        ],
        password: [
          {required:true,message:'请输入密码',trigger:'blur'},
        ],
      }
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /*alert('参数格式正确，将允许提交请求到服务器端！');*/

          let url='http://localhost:8080/login';
          console.log('请求路径='+url);
          console.log('请求参数=');
          console.log(this.user);

          this.axios.post(url,this.user).then((response)=>{
            console.log("服务器端的响应")
            console.log(response);
            let responseBody=response.data;
            if(responseBody==1){
              this.$message({
                message: '登录成功！（暂不跳转）',
                type: 'success'
              });
            }else if(responseBody==2){
              this.$message.error('登录失败！用户名不存在！');
            }else {
              this.$message.error('登录失败！密码错误！');
            }
          })
        } else {
          alert('参数格式有误，不允许提交！');
          return false;
        }
      });
    }
  }
}
</script>

<style>
body{
  margin: 0;/*去掉自带外边距*/
 /* background-image: url("imgs/bg.jpg");*/
  /*cover设置封面效果*/
  background-size: cover;
  text-align: center;
}
h1{
  font-size: 72px;
  color: #0096dc;
  margin-bottom: 0;
}
img{width: 100px}
h2{
  font-size: 32px;
  color: #0096dc;
  margin-bottom: 0;
}
</style>